<template>
  <div>
    <div class="pc-home" v-if="!isphone">
      <div class="sucess">
        <div class="logo">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.socialmarketings.com%2Farticle%2F2020%2F09%2F2020%2F09%2F1600403050815.jpeg&refer=http%3A%2F%2Fimg.socialmarketings.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659776444&t=00c97418deb39f2c8868a4c6ca323bce"
            alt=""
          />
        </div>
        <div class="sum">
          <van-cell-group>
            <van-cell title="支付详情" />
            <van-cell title="订单流水号" :label="orderid" />
            <van-cell title="支付金额" :label="'￥' + sum" />
            <van-cell title="下单时间" :label="(date / 1) | formatDate" />
            <van-cell title="支付方式" label="余额" />
          </van-cell-group>
        </div>
        <button></button>
      </div>
    </div>
    <div class="phone-home" v-else>
      <div class="sucess">
        <div class="logo">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.socialmarketings.com%2Farticle%2F2020%2F09%2F2020%2F09%2F1600403050815.jpeg&refer=http%3A%2F%2Fimg.socialmarketings.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659776444&t=00c97418deb39f2c8868a4c6ca323bce"
            alt=""
          />
        </div>
        <div class="sum">
          <van-cell-group>
            <van-cell title="支付详情" value="" />
            <van-cell title="订单流水号" value="" :label="orderid" />
            <van-cell title="支付金额" value="" :label="'￥' + sum" />
            <van-cell
              title="下单时间"
              value=""
              :label="(date / 1) | formatDate"
            />
            <van-cell title="支付方式" value="" label="余额" />
          </van-cell-group>
        </div>
        <button></button>
      </div>
      <div class="fail"></div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { payinfo } from '@/api/index';
import { Toast } from 'vant';
export default {
  data() {
    return {
      orderid: '',
      sum: '',
      date: '',
      seccond: 5,
    };
  },
  computed: {
    ...mapState('media', ['isphone']),
  },
  created() {
    let data = {
      out_trade_no: this.$route.query.out_trade_no, // 订单号
      trade_no: this.$route.query.trade_no, // 支付宝交易号
    };
    this.orderid = this.$route.query.trade_no;
    console.log(data);
    payinfo(data).then((res) => {
      console.log(res);
      this.sum = res.data.result.sum;
      this.date = res.data.timestamp;
      Toast.loading({
        duration: 0,
        message: '支付成功! 正在跳转主页...',
      });
    });
    const toast = Toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: '',
    });
    let second = 6;
    const timer = setInterval(() => {
      second--;
      if (second) {
        toast.message = `${second} 秒后跳转首页`;
      } else {
        clearInterval(timer);
        // 手动清除 Toast
        Toast.clear();
        this.$router.push('/');
      }
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>
.pc-home {
  .logo {
    width: 100%;
    background-color: rgb(25, 118, 255);
    img {
      width: 500px;
      height: 500px;
      position: relative;
      left: 50%;
      margin-left: -250px;
    }
  }
  .sum {
    width: 100%;
    text-align: center;
    font-size: 16px;
  }
}
.phone-home {
  .logo {
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: #1976ff;
    text-align: center;
    img {
      width: 250px;
    }
  }
  .sum {
    z-index: 10;
    height: 300px;
    margin: 0 auto;
  }
}
</style>
